<template>
  <!-- 最左侧机器番号列表 -->
  <div class="LedtContent">
    <div class="form-view">
      <!-- 搜索 -->
      <div class="form-row" v-if="activeName != 'fourth'">
        <div class="form-row-label seach">
          <i class="el-icon-search" @click="ctgVauleSearch"></i>
        </div>
        <div class="form-row-right-content">
          <el-input v-model="ctgVaule" placeholder="" class="form-ipt" @keyup.enter.native="ctgVauleSearch"></el-input>
        </div>
      </div>
      <!-- checkbox -->
      <div class="form-checkbox" v-if="activeName != 'fourth'">
        <el-radio v-model="radio" label="1" @change="radioChange('1')">{{
          $t("message.bhView.leftComponents.machine")
        }}</el-radio>
        <el-radio v-model="radio" label="2" @change="radioChange('2')">{{
          $t("message.bhView.leftComponents.piping")
        }}</el-radio>
      </div>
      <!-- 装置 -->
      <div class="form-row">
        <div class="form-row-label">
          {{ $t("message.bhView.leftComponents.device") }}
        </div>
        <div class="form-row-right-content">
          <el-select v-model="valuePlant" :placeholder="$t('message.bhView.label.placeholderSearch')" class="form-ipt"
            @change="PlantChange()" @focus="getPlantApi(1, 1000)">
            <el-option v-for="item in plantOptions" :key="item.pltCode" :label="item.pltName"
              :value="item.pltCode"></el-option>
          </el-select>
        </div>
      </div>
      <!-- 机种 -->
      <div class="form-row" v-if="activeName != 'fourth'">
        <div class="form-row-label">
          {{ $t("message.bhView.leftComponents.typeOfMachine") }}
        </div>
        <div class="form-row-right-content">
          <el-select v-model="valueCodeCtg" :placeholder="$t('message.bhView.label.placeholderSearch')" class="form-ipt"
            @change="CodeCtgChange()" @focus="getCodeCtgApi(0, '', 1, 100, radio == '1' ? '0' : '1')">
            <el-option v-for="item in CodeCtg" :key="item.key" :label="item.label" :value="item.key"></el-option>
          </el-select>
        </div>
      </div>
      <!-- 法规 -->
      <div class="form-row" v-if="activeName != 'fourth'">
        <div class="form-row-label">
          {{ $t("message.bhView.leftComponents.statute") }}
        </div>
        <div class="form-row-right-content">
          <el-select v-model="valueCodeLaw" :placeholder="$t('message.bhView.label.placeholderSearch')" class="form-ipt"
            @change="CodeLawChange()" @focus="gtCodeLawApi(
              0,
              '',
              1,
              1000,
              valuePlant,
              parseInt(radio),
              valueCodeCtg
            )
              ">
            <el-option v-for="item in CodeLaw" :key="item.key" :label="item.label" :value="item.key"></el-option>
          </el-select>
        </div>
      </div>
      <!-- clear -->
      <div class="form-row" style="margin: 0" v-if="activeName != 'fourth'">
        <div class="form-row-label"></div>
        <div class="form-row-right-content">
          <el-button type="primary" size="mini" style="width: 66px;height: 24px;" class="ClearBtn"
            @click="ClearVaule">Clear</el-button>
        </div>
      </div>
    </div>

    <!-- 机器番号 -->
    <div class="machine-number-long machine-number" v-show="activeName != 'fourth'">
      <!-- --基本仕样-- -->
      <div class="title">
        <span v-if="radio == '1'">{{
          $t("message.bhView.leftComponents.MachineSerialNumber")
        }}</span>
        <span v-if="radio == '2'">{{
          $t("message.bhView.leftComponents.PeiGuanNumber")
        }}</span>
        <!-- <span v-if="activeName == 'fourth'">{{
          $t("message.bhView.leftComponents.handle")
        }}</span> -->
      </div>
      <div class="machine-number-body" ref="machineRef">
        <div class="Item" v-for="(Item, index) in drwMgtData" :key="Item.dmgCode"
          @click="ClickTableRow(Item, index, true)" :class="index == itemActive ? 'ItemActive' : ''">
          <div class="ItemID">{{ index + 1 }}</div>
          <div class="ItemName">
            <!-- {{ Item.macName }} -->
            <el-tooltip class="item" effect="dark" :content="Item.macName" placement="top">
              <span style="white-space: nowrap;">{{ Item.macName }}</span>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <!-- 处理系 -->
    <div class="fourth-tabel-style machine-number" v-if="activeName == 'fourth' && selectViewValue != 2">
      <div class="title">
        <span>{{ $t("message.bhView.leftComponents.handle") }}</span>
      </div>
      <div class="machine-number-body">
        <div class="Item" v-for="(Item, index) in processor" :key="Item.proCode" @click="ClickReadTableRow(Item, index)"
          :class="index == ReaditemActive ? 'ItemActive' : ''">
          <div class="ItemID">{{ index + 1 }}</div>
          <div class="ItemName">
            <!-- {{ Item.proName }} -->
            <el-tooltip class="item" effect="dark" :content="Item.proName" placement="top">
              <span style="white-space: nowrap;">{{ Item.proName }}</span>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="bh-footer">
      <div class="bh-footer-msg">
        {{ $t("message.bhView.WallThicknessPattern.number") }}
        {{ activeName == "fourth" ? processorNumber : number }}
        {{ $t("message.bhView.WallThicknessPattern.piece") }}
      </div>
      <div class="bh-footer-msg">
        <span v-if="activeName == 'first'">{{ $t("message.bhView.WallThicknessPattern.point") }}</span>
        <span v-if="activeName == 'second'">{{ $t("message.bhView.WallThicknessPattern.abstract") }}</span>
        <span v-if="activeName == 'third'">{{ $t("message.bhView.WallThicknessPattern.detail") }}</span>
        <span v-if="activeName == 'first' || activeName == 'second' || activeName == 'third'">
          {{ numberData }}
          {{ $t("message.bhView.WallThicknessPattern.piece") }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPlant,
  getMachine,
  gtCodeLaw,
  getCodeCtg,
  getProcessor,
} from "../../api/api";
import eventBus from "../../eventBus/bus";
import $ from "jquery";
import _ from 'lodash-es';

import { showLoading, hideLoading } from "@/utils/loading";
// 导出模块
export default {
  // 模块名字
  name: "LeftContent",
  props: {
    numberData: Number,
    activeName: String,
    styleOptionsValue: Number,
  },
  // 模块数据
  data() {
    //数据
    return {
      oldParams: {
        "macCode": 0,
        "macName": "",
        "pltCode": 9,
        "macType": 1,
        "ctgCode": 0,
        "impCode": 0,
        "lawCode": 0,
        "pageIndex": 1,
        "pageSize": 9999,
      },
      panOrViewFlg: false,
      ReaditemActiveRow: {},
      nextRow: {},
      nextIndex: -1,
      input: "",
      radio: this.$store.state.excelMacType.toString() || this.$store.state.macType.toString(),
      options: [
        {
          value: "",
          label: "",
        },
      ],
      value: "",
      plantOptions: [],
      valuePlant: "",
      drwMgtData: [],
      CodeLaw: [],
      valueCodeLaw: "",
      CodeCtg: [],
      valueCodeCtg: "",
      number: 0,
      processorNumber: 0,
      itemActive: null,
      ReaditemActive: null,
      ctgVaule: "",
      processor: [],
      selectViewValue: 1,
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    activeName: {
      deep: true,
      handler: function (newV, oldV) {
        if (newV != "fourth") {
          let dataJson = {
            macCode: 0,
            macName: this.ctgVaule,
            pltCode:
              this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
            macType: this.$store.state.macType,
            ctgCode:
              this.$store.state.ctgCode == "" ? 0 : this.$store.state.ctgCode,
            impCode: 0,
            lawCode:
              this.$store.state.lawCode == "" ? 0 : this.$store.state.lawCode,
            pageIndex: 1,
            pageSize: 9999,
            MeType: this.activeName == 'first' ? 1 : this.activeName == 'second' ? 2 : this.activeName == 'third' ? 3 : 0
          };
          getMachine(dataJson).then((res) => {
            this.drwMgtData = [];
            this.number = 0;
            if (res.data.code != 0) {
              return;
            }
            this.drwMgtData = res.data.data;
            this.number = res.data.count;
            setTimeout(() => {
              console.log('this.itemActive', this.itemActive);
              // 未知原因补坑+1
              if (!this.itemActive) {
                this.itemActive = 0
              }
              if (this.drwMgtData.length - 1 >= this.itemActive) {
                this.ClickTableRow(this.drwMgtData[this.itemActive], this.itemActive);
              } else {
                this.ClickTableRow(this.drwMgtData[0], 0);
              }
            }, 300);
            if (this.drwMgtData.length == 0) return;
            this.$emit("clearBhTabel");
          });
        } else {
          this.getProcessorApi();
        }
      },
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    // 获取装置
    getPlantApi(pageIndex, pageSize) {
      let dataJson = {
        pltCode: 0,
        platName: "",
        pageIndex: pageIndex,
        pageSize: pageSize,
      };
      getPlant(dataJson).then((res) => {
        this.plantOptions = [];
        if (res.data.code != 0) {
          return;
        }
        this.plantOptions = res.data.data;
      });
    },
    //获取机器/配管
    getMachineApi(macCode, macName, impCode, pageIndex, pageSize, BBB = '', isClear = false) {

      eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

      let Fn = () => {
        this.$store.commit("changeMacType", Number(this.radio));

        // 更新保存的装置code
        this.$store.commit("changePltCode", this.valuePlant);
        // 更新保存的装置name
        this.plantOptions.forEach((Item) => {
          if (Item.pltCode == this.valuePlant) {
            let valuePlant = Item.pltName;
            this.$store.commit("changePlantName", valuePlant);
            this.$store.commit("changePrnCode", Item.prnCode);
          }
        });

        if (isClear) {
          this.ctgVaule = "";
          this.valueCodeCtg = "";
          this.valueCodeLaw = "";
          this.$store.commit("changeCtgCode", this.valueCodeCtg);
          this.$store.commit("changeLawCode", this.valueCodeLaw);
          this.$store.commit("changeMacName", "");
          this.$store.commit("changeMacNameb", "");
          this.$store.commit("changeMacCode", "");
        }
        let dataJson = {
          macCode: macCode == "" ? 0 : macCode,
          macName: macName,
          pltCode:
            this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
          macType: this.$store.state.macType,
          ctgCode:
            this.$store.state.ctgCode == "" ? 0 : this.$store.state.ctgCode,
          impCode: impCode == "" ? 0 : impCode,
          lawCode:
            this.$store.state.lawCode == "" ? 0 : this.$store.state.lawCode,
          pageIndex: pageIndex,
          pageSize: 9999,
          MeType: this.activeName == 'first' ? 1 : this.activeName == 'second' ? 2 : this.activeName == 'third' ? 3 : 0
        };
        this.oldParams = {
          macCode: macCode == "" ? 0 : macCode,
          macName: macName,
          pltCode:
            this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
          macType: this.$store.state.macType,
          ctgCode:
            this.$store.state.ctgCode == "" ? 0 : this.$store.state.ctgCode,
          impCode: impCode == "" ? 0 : impCode,
          lawCode:
            this.$store.state.lawCode == "" ? 0 : this.$store.state.lawCode,
          pageIndex: pageIndex,
          pageSize: 9999,
          MeType: this.activeName == 'first' ? 1 : this.activeName == 'second' ? 2 : this.activeName == 'third' ? 3 : 0
        };
        getMachine(dataJson).then((res) => {
          this.drwMgtData = [];
          this.number = 0;
          this.$emit("ClearDataFunction");
          if (res.data.code != 0) {
            this.$emit("ClickTableRow", {})
            return;
          }
          // debugger
          this.drwMgtData = res.data.data;

          //  123123


          this.number = res.data.count;
          this.itemActive = 0;

          if (BBB) {
            this.drwMgtData.forEach((item, index) => {
              if (item.macName == BBB) {
                this.itemActive = index;
              }
            })
            this.$refs.machineRef.scrollTop = this.itemActive * 24;
          } else {
            this.itemActive = 0;
            this.$refs.machineRef.scrollTop = 0;
          }
          if (this.itemActive >= this.drwMgtData.length) {
            this.itemActive = this.drwMgtData.length - 1;
          }
          this.$store.commit("changeRealMacCode", res.data.data[this.itemActive].realMacCode);
          this.$store.commit("changeMacName", res.data.data[this.itemActive].name);
          this.$store.commit("changeMacNameb", res.data.data[this.itemActive].macName);

          this.$emit("ClickTableRow", this.drwMgtData[this.itemActive]);
          this.$emit("clearBhTabel");
          setTimeout(() => {
            this.itemActive = this.itemActive == 0 ? 0 : this.itemActive + 1;
            this.ClickTableRow(this.drwMgtData[this.itemActive], this.itemActive);
          }, 300);
        });
      }

      if (this.$store.state.isCurrentNext) {
        Fn();
      } else {
        /**
          * 4-1。   记录原来该运行的函数。
          * 4-2。   执行保存弹出框操作。   
          */
        this.$store.commit("changeIsCurrentFn", Fn);

        eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
      }


    },
    //处理系一览
    async getProcessorApi(currentItem) {
      console.log('111');
      let dataJson = {
        pltCode:
          this.$store.state.pltCode == "" ? 0 : this.valuePlant,
      };
      let res = await getProcessor(dataJson);
      this.processor = [];
      this.$emit("ClearDataFunction");
      if (!res) {
        this.$emit("ClickReadTableRow", null);
        eventBus.$emit('isNoSvg')
        return;
      }
      if (res.data.code != 0) {
        this.$emit("ClickReadTableRow", null);
        eventBus.$emit('isNoSvg')
        return;
      }
      this.ReaditemActive = 0;
      this.processor = res.data.data;
      console.log(this.processor)
      this.processorNumber = res.data.data.length;
      console.log('222');

      if (this.panOrViewFlg) {
        console.log('333');

        for (let i = 0; i < this.processor.length; i++) {
          if (this.processor[i].proCode == currentItem.proCode) {
            this.ClickReadTableRow(this.processor[i], i);
          }
        }
        this.panOrViewFlg = false;
      } else {
        console.log('444');

        this.$emit("ClickReadTableRow", this.processor[0]);

      }
    },
    //获取法规
    gtCodeLawApi(
      code,
      codName,
      pageIndex,
      pageSize,
      pltCode,
      macType,
      ctgCode
    ) {
      let dataJson = {
        code: code,
        codName: codName,
        pageIndex: pageIndex,
        pageSize: pageSize,
        pltCode:
          this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
        macType: this.$store.state.macType,
        ctgCode: ctgCode == "" ? 0 : ctgCode,
      };
      gtCodeLaw(dataJson).then((res) => {
        this.CodeLaw = [];
        if (res.data.code != 0) {
          return;
        }
        this.CodeLaw = res.data.data;
      });
    },
    // 机种
    getCodeCtgApi(code, codName, pageIndex, pageSize, codSymb) {
      let dataJson = {
        macType: Number(this.radio)
      };
      getCodeCtg(dataJson).then((res) => {
        this.CodeCtg = [];
        if (res.data.code != 0) {
          return;
        }
        this.CodeCtg = res.data.data;
      });
    },
    //装置筛选
    async PlantChange(AAA, BBB) {
      // // 更新保存的装置code
      // this.$store.commit("changePltCode", this.valuePlant);
      // // 更新保存的装置name
      // this.plantOptions.forEach((Item) => {
      //   if (Item.pltCode == this.valuePlant) {
      //     let valuePlant = Item.pltName;
      //     this.$store.commit("changePlantName", valuePlant);
      //     this.$store.commit("changePrnCode", Item.prnCode);
      //   }
      // });
      // ReadingCompontens 阅览页  不是表格显示方式 获取处理系
      if (this.activeName == "fourth" && this.selectViewValue != 2) {
        this.drwMgtData = [];
        await this.getProcessorApi(AAA);
        this.$store.commit("changePltCode", this.valuePlant);
        return;
      }
      this.getMachineApi("", "", "", 1, 1000, BBB);
      // this.itemActive = null;
    },
    //机种筛选
    CodeCtgChange() {
      this.$store.commit("changeCtgCode", this.valueCodeCtg);
      this.getMachineApi("", "", "", 1, 1000);
      // this.itemActive = null;
    },
    //法规筛选
    CodeLawChange() {
      debugger
      this.$store.commit("changeLawCode", this.valueCodeLaw);
      this.getMachineApi("", this.ctgVaule, "", 1, 1000);

      // this.itemActive = null;
    },
    //点击表格行
    ClickTableRow(row, index, isBtnClick = false) {
      console.log('fsdfsdfsdfsdfsdfsdfsdf 444');
      if (this.itemActive == index && isBtnClick) {
        return
      }
      //  通知是否更改
      if (isBtnClick) {
        eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

        this.$store.state.leftRowName = row.macName;
      }
      //  记录函数
      let Fn = () => {
        console.log(row, "rrrrrrrrrrr")
        this.$store.commit("changeRealMacCode", row.realMacCode)
        this.$store.commit("changeMacCode", row.macCode)
        eventBus.$emit("isGetInfo", row)
        eventBus.$emit("showPlan", 0)
        this.itemActive = index;
        this.$emit("ClickTableRow", row);
      }
      //  未更改直接执行，更改则1.记录之前的函数2.唤起保存弹框
      if (this.$store.state.isCurrentNext) {
        console.log('fsdfsdfsdfsdfsdfsdfsdf 555');
        Fn();
      } else {
        console.log('fsdfsdfsdfsdfsdfsdfsdf 666');
        this.$store.commit("changeIsCurrentFn", Fn);

        eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
      }
    },
    // 阅览表格行
    ClickReadTableRow(row, index) {
      console.log(row, 'rrrrrrrrrrrr');
      this.ReaditemActive = index;
      this.ReaditemActiveRow = row;
      if (!row) return;
      row.timestamp = new Date().valueOf();
      // this.$emit("ClickReadTableRow", row); 更新选中
      this.$emit("ClickReadTableRow", JSON.parse(JSON.stringify(row)));
    },
    //清空默认筛选
    ClearVaule() {
      // if (this.ctgVaule == '' && this.valuePlant == this.plantOptions[0].pltCode && this.valueCodeCtg == 0 && this.valueCodeLaw == 0) {
      //   return
      // }

      this.getMachineApi("", "", "", 1, 1000, '', true);
      // this.itemActive = null;

      // let _dataJson = {
      //   macCode: 0,
      //   macName: "",
      //   pltCode:
      //     this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
      //   macType: this.$store.state.macType,
      //   ctgCode: 0,
      //   impCode: 0,
      //   lawCode: 0,
      //   pageIndex: 1,
      //   pageSize: 1000,
      // };
      // getMachine(_dataJson).then((res) => {
      //   this.drwMgtData = [];
      //   this.number = 0;
      //   if (res.data.code != 0) {
      //     return;
      //   }
      //   this.drwMgtData = res.data.data;
      //   this.number = res.data.count;
      //   this.itemActive = 0;
      //   this.$emit("ClickTableRow", this.drwMgtData[0]);
      // });
    },
    ctgVauleSearch() {
      this.getMachineApi("", this.ctgVaule, "", 1, 1000);
    },
    //切换机器或者配管 数据刷新
    radioChange(radio) {
      // this.$store.commit("changeMacType", radio);
      this.ctgVaule = "";
      this.valueCodeCtg = "";
      this.valueCodeLaw = "";
      this.$store.commit("changeCtgCode", this.valueCodeCtg);
      this.$store.commit("changeLawCode", this.valueCodeLaw);
      this.getMachineApi("", this.ctgVaule, "", 1, 1000);
    },

    changeRadioSelect(e) {
      this.radio = e;
      this.$store.commit("changeMacType", this.radio);
      let dataJson = {
        macCode: 0,
        macName: "",
        pltCode:
          this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
        macType: this.$store.state.macType,
        ctgCode:
          this.$store.state.ctgCode == "" ? 0 : this.$store.state.ctgCode,
        impCode: 0,
        lawCode:
          this.$store.state.lawCode == "" ? 0 : this.$store.state.lawCode,
        pageIndex: 1,
        pageSize: 9999,
        MeType: this.activeName == 'first' ? 1 : this.activeName == 'second' ? 2 : this.activeName == 'third' ? 3 : 0
      };
      getMachine(dataJson).then((res) => {
        this.drwMgtData = [];
        this.number = 0;
        if (res.data.code != 0) {
          return;
        }
        this.drwMgtData = res.data.data;
        this.number = res.data.count;
        if (this.drwMgtData.length == 0) return;
        this.$emit("clearBhTabel");
      });
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() {
    //默认添加装置
    let dataJson = {
      pltCode: 0,
      platName: "",
      pageIndex: 1,
      pageSize: 1000,
    };

    getPlant(dataJson).then((res) => {
      this.plantOptions = [];
      if (res.data.code != 0) {
        this.valuePlant = null;
        this.$store.commit("changePltCode", null);
        return;
      }
      this.plantOptions = res.data.data;

      let filterFlg = this.plantOptions.filter(item => item.pltCode == this.$store.state.pltCode);
      //  如果有选择过装置 ---添加为记忆选项
      if (this.$store.state.pltCode && filterFlg.length > 0) {
        this.valuePlant = this.$store.state.pltCode;
      } else {
        this.valuePlant = this.plantOptions[0].pltCode;
        this.$store.commit("changePltCode", this.valuePlant);
      }


      this.plantOptions.forEach((Item) => {
        if (Item.pltCode == this.valuePlant) {
          let valuePlant = Item.pltName;
          this.$store.commit("changePlantName", valuePlant);
          this.$store.commit("changePrnCode", Item.prnCode);
        }
      });
      this.getProcessorApi();
      if (this.activeName == "fourth") {
        // return;
      }
      this.radio = `${this.$store.state.macType}`;

      this.$store.commit("changeCtgCode", '');
      this.$store.commit("changeLawCode", '');

      let dataJson = {
        macCode: 0,
        macName: "",
        pltCode:
          this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
        macType: Number(this.radio) || Number(this.$store.state.macType),
        ctgCode:
          this.$store.state.ctgCode == "" ? 0 : this.$store.state.ctgCode,
        impCode: 0,
        lawCode:
          this.$store.state.lawCode == "" ? 0 : this.$store.state.lawCode,
        pageIndex: 1,
        pageSize: 9999,
        MeType: this.activeName == 'first' ? 1 : this.activeName == 'second' ? 2 : this.activeName == 'third' ? 3 : 0
      };
      setTimeout(() => {
        getMachine(dataJson).then((res) => {
          this.drwMgtData = [];
          this.number = 0;
          this.$emit("ClearDataFunction");
          if (res.data.code != 0) {
            return;
          }
          this.drwMgtData = res.data.data;
          this.number = res.data.count;
          // this.itemActive = 0;

          if (this.drwMgtData.length == 0) return;
          this.$emit("clearBhTabel");

        });
      }, 500);
    });
  },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    //  如果保存报错则-切换之前的搜索状态
    eventBus.$on("backParamsForLeftView", () => {
      this.ctgVaule = this.oldParams.macName;

      this.radio = `${this.oldParams.macType}`;
      this.$store.commit("changeMacType", this.radio);
      this.valuePlant = this.oldParams.pltCode;
      this.$store.commit("changePltCode", this.valuePlant);
      this.valueCodeCtg = this.oldParams.ctgCode == 0 ? "" : this.oldParams.ctgCode;
      this.$store.commit("changeCtgCode", this.valueCodeCtg);
      this.valueCodeLaw = this.oldParams.lawCode == 0 ? "" : this.oldParams.lawCode;
      this.$store.commit("changeLawCode", this.valueCodeLaw);
    })
    eventBus.$on("reGetLeftList", (name) => {
      showLoading();
      let dataJson = {
        macCode: 0,
        macName: this.ctgVaule,
        pltCode:
          this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
        macType: this.$store.state.macType,
        ctgCode:
          this.valueCodeCtg == "" ? 0 : this.$store.state.ctgCode,
        impCode: 0,
        lawCode:
          this.$store.state.lawCode == "" ? 0 : this.$store.state.lawCode,
        pageIndex: 1,
        pageSize: 9999,
        MeType: this.activeName == 'first' ? 1 : this.activeName == 'second' ? 2 : this.activeName == 'third' ? 3 : 0
      };
      getMachine(dataJson).then((res) => {
        this.drwMgtData = [];
        this.number = 0;
        if (res.data.code != 0) {
          return;
        }
        this.drwMgtData = res.data.data;
        this.number = res.data.count;
        if (this.drwMgtData.length == 0) return;
        this.$emit("clearBhTabel");
        var tempIndex = 0;
        setTimeout(() => {
          // 在 created 钩子中的操作完成后执行的代码...  
          if (name) {
            this.drwMgtData.forEach((item, index) => {
              if (item.macName == name) {
                tempIndex = index;
              }
            })
            this.$refs.machineRef.scrollTop = tempIndex * 24;
          } else {
            tempIndex = 0;
            this.$refs.machineRef.scrollTop = 0;
          }
          if (tempIndex >= this.drwMgtData.length) {
            tempIndex = this.drwMgtData.length - 1;
          }
          this.ClickTableRow(this.drwMgtData[tempIndex], tempIndex);
          hideLoading();
        }, 300);
      });
    });

    eventBus.$on("goNextOfLeftTable", () => {
      if (this.nextIndex == -1) {
        return
      }
      this.itemActive = this.nextIndex;
      this.ClickTableRow(this.drwMgtData[this.nextIndex], this.nextIndex);
      setTimeout(() => {
        this.nextIndex = -1;
      }, 50);
    });

    eventBus.$on("reClickActive", () => {
      if (!this.itemActive) {
        this.itemActive = 0;
      }
      this.ClickTableRow(this.drwMgtData[this.itemActive], this.itemActive);
    });
    let _this = this;
    eventBus.$on("selectViewValueFun", function (value) {
      _this.selectViewValue = parseInt(value);
    });
    eventBus.$on("triggerLeftTabelClick", function (data) {
      _this.drwMgtData.forEach((element, index) => {
        if (element.macName == data.macName) {
          _this.itemActive = index;
          _this.$emit("ClickTableRow", _this.drwMgtData[index]);
        }
      });
    });
    eventBus.$on("modifyPltCode", function (val) {
      console.log("modifyPltCode", val);
      _this.valuePlant = val;
      _this.getProcessorApi();
    });

    eventBus.$on("InitTableFirstData", function () {
      _this.itemActive = 0;
      _this.$emit("ClickTableRow", _this.drwMgtData[0]);
    });
    eventBus.$on("SelectTableRow", function () {
      var isFind = false;
      _this.drwMgtData.forEach((element, index) => {
        // eslint-disable-next-line no-useless-catch
        try {
          // debugger
          if (
            element.macName == _this.$store.state.macNameb
            // element.name == _this.$store.state.macName
          ) {
            _this.itemActive = index;
            _this.ClickTableRow(_this.drwMgtData[index], index);
            _this.$emit("ClickTableRow", _this.drwMgtData[index]);
            // debugger;
            console.log(_this.drwMgtData[index], " _this.drwMgtData[index]");
            _this.$nextTick(function () {
              $(".machine-number-body").scrollTop(index * 24);
            });
            isFind = true;
            throw console.log("结束forEach循环 抛出异常");
          } else {
            eventBus.$on("leftStart", (e) => {
              if (e) this.$emit("ClickTableRow", this.drwMgtData[0]);
            })
          }
        } catch (e) {
          // throw e;
        }
      });
      if (!isFind) {
        console.log("CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCc")


        // _this.$emit("ClickTableRow", 0);
        _this.itemActive = 0;
        _this.$emit("ClickTableRow", _this.drwMgtData[0]);
        _this.$nextTick(function () {
          $(".machine-number-body").scrollTop(0 * 24);
        });
      }
    });

    eventBus.$on("changeReadingLeftTableSelectCode", function (e) {
      // _this.getOfferHeaderApi();
      // debugger
      if (e == -1) {
        _this.ClickReadTableRow(_this.processor[0], 0);
        return;
      }

      for (let i = 0; i < _this.processor.length; i++) {
        if (_this.processor[i].proCode == e) {
          _this.ClickReadTableRow(_this.processor[i], i);
        }
      }
      // _this.ClickReadTableRow();
    });

    // 根据全景图选择，切换装置等。
    eventBus.$on("panOrView", (e) => {
      console.log('panOrView', e);
      // 当无数据时，切回原来
      if (e == 'No Data') {
        this.panOrViewFlg = false;
        this.ClickReadTableRow(this.processor[this.ReaditemActive], this.ReaditemActive);
        return
      }
      this.panOrViewFlg = true;
      // 切换装置后，等加载完列表，再确定选择的index
      this.valuePlant = e.pltCode;
      this.PlantChange(e);


    });

    eventBus.$on("Mods", (D) => {
      showLoading();
      console.log('Mods', D);
      // radio 1 机器 2 配管
      // valuePlant
      // D = {
      //   name: 'test1',
      //   macType: 2,
      //   pltCode: 10
      // }
      this.radio = D.macType.toString();
      this.valuePlant = D.pltCode;
      this.$store.state.macType = D.macType;
      this.$store.state.pltCode = D.pltCode;

      this.PlantChange('', D.name);
      hideLoading();

    });



  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() {
    eventBus.$off("backParamsForLeftView");
    eventBus.$off("selectViewValueFun");
    eventBus.$off("triggerLeftTabelClick");
    eventBus.$off("modifyPltCode");
    eventBus.$off("InitTableFirstData");
    eventBus.$off("SelectTableRow");
    eventBus.$off("reClickActive");
    eventBus.$off("reGetLeftList");
    eventBus.$off("panOrView");
    eventBus.$off("Mods");
  },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>

<style lang="scss" scoped>
.LedtContent {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.form-view {
  padding: 16px 0px 0px 24px;

  .form-row {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    .seach {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .form-row-label {
      color: rgba(0, 0, 0, 0.85);
      //   font-weight: 500;
    }

    .form-row-right-content {
      width: 197px;

      .form-ipt {
        width: 100%;
        height: 24px;

        ::v-deep .el-input__inner {
          height: 24px;
          background: #fff;
        }

        ::v-deep .el-input__icon {
          line-height: 24px;
        }
      }

      .ClearBtn {
        min-width: 66px;
        height: 24px;
        line-height: 0;
        font-size: 14px;
        // border-radius: 4px;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // border: 1px solid #eaeaeb;
        // background: #106ebe;
        // color: #fff;
        float: right;
      }
    }
  }

  .form-checkbox {
    padding: 0 0 12px 44px;
  }
}

.fourth-tabel-style {
  height: calc(100% - 100px) !important;
}

.machine-number-long {
  height: calc(100% - 266px) !important;
}

.machine-number {
  width: calc(100% - 24px);
  // height: calc(100% - 282px);
  height: calc(100% - 424px);
  border: 1px solid #c3c3c3;
  margin-left: 24px;

  // border-right: 0 none;
  .title {
    width: 100%;
    height: 32px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(195, 195, 195, 0.3);
  }

  .machine-number-body {
    width: 100%;
    height: calc(100% - 32px);
    overflow: hidden;
    overflow-y: auto;

    .Item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 24px;
      cursor: pointer;
      border-bottom: 1px solid rgba(195, 195, 195, 0.3);
      background: #ffffff;
      transition: 0.5s;

      .ItemID {
        width: 31px;
        min-width: 31px;
        height: 24px;
        border-right: 1px solid rgba(195, 195, 195, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(0, 0, 0, 0.85);
      }

      .ItemName {
        padding-left: 24px;
        height: 100%;
        color: rgba(0, 0, 0, 0.65);
        display: flex;
        align-items: center;
      }
    }

    .Item:hover {
      background: rgb(255, 241, 240);
    }

    .ItemActive {
      background: rgb(255, 241, 240);
    }
  }
}

.bh-style {
  width: calc(100% - 24px);
  // height: 352px;
  border: 1px solid #c3c3c3;
  margin-left: 24px;

  // border-right: 0 none;
  .title {
    width: 100%;
    height: 32px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(195, 195, 195, 0.3);
  }

  .bh-style-body {
    width: 100%;
    height: calc(100% - 32px);

    .Item {
      width: 100%;
      display: flex;
      height: 24px;
      justify-content: flex-start;
      align-items: center;
      color: rgba(0, 0, 0, 0.85);
      padding-left: 12px;
      border-bottom: 1px solid rgba(195, 195, 195, 0.3);
      background: #ffffff;
    }

    .item-label {
      width: 70px;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .item-bh-msg {
      line-height: 24px;
      width: calc(100% - 70px);
      height: 100%;

      .right-text {
        float: right;
        margin-right: 12px;
      }
    }
  }
}

.bh-footer {
  // width: 100%;
  height: 38px;
  background: #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 24px;
  text-align: center;
  // .bh-footer-msg {
  //   // width: 132px;
  //   height: 24px;
  //   line-height: 24px;
  //   padding-left: 8px;
  //   border-radius: 4px;
  //   margin: 0 4px;
  // }
}

::v-deep .el-radio {
  margin-right: 24px;
}

::v-deep .el-radio:last-child {
  margin-right: 0;
}
</style>
